<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script type="module" src="./a.js"></script>
<script type="module" src="./b.js"></script> -->

<script async src="./c.js"></script>
<script async src="./d.js"></script>
</head>
<body>
    
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

<script>
// 在script标签添加了type="module"属性之后，浏览器会异步加载当前脚本文件
// 等待DOM加载完成之后，再依次执行脚本（不占用主线程，不阻塞页面渲染）

// 在script标签上添加 defer 和 async 的区别？
// 默认情况下，浏览器是同步加载JS脚本（会阻塞页面渲染）

// defer 异步加载脚本，等待DOM加载完成后执行脚本
// 多个defer脚本，按顺序依次执行

// async 异步加载脚本，脚本加载完成后立即执行
// 多个async脚本，不一定按顺序执行

</script>
</body>
</html>